<template>
  <view>
    <s-layout
      title="附近门店"
      navbar="custom1"
      :bgStyle="{ ...template.style?.background, color: '#F6F6F6' }"
      onShareAppMessage
    >
      <assNavbar title="附近门店" :messageTitleShow="false">
        <template #center>
          <view class="w-100 search ss-flex ss-row-center ss-p-r-50 ss-p-r-16">
            <view class="w-100 ss-flex-1 right ss-flex ss-row-between ss-r-50 ss-m-r-10">
              <view class="search-view ss-flex ss-row-left">
                <uni-icons class="search-icon" type="search" color="#E4E4E4" size="20"></uni-icons>
                <input class="my-input" :inputBorder="false" v-model="search" placeholder="搜索" />
              </view>
              <view class="search_btn" @click="onSearch">搜索</view>
            </view>
          </view>
        </template>
      </assNavbar>

      <!-- <c-search activeColor="var(--ui-BG-5)" @change="searchChange"/> -->
      <!-- 门店分类 -->
      <view class="w-100 bg_color tabs ss-m-y-20">
        <scroll-view class="scroll-view_H" scroll-x="true" :scroll-into-view="activeId">
          <template v-for="(item, index) in childrend" :key="index">
            <view
              :id="'categorys_' + index"
              class="scroll-view-item_H type"
              :class="{ ssactive: index == child_index }"
              @click="onCategorysTabsChange(item, index)"
              >{{ item.name }}</view
            >
          </template>
        </scroll-view>
      </view>

      <!-- 门店列表 -->

      <view class="ss-m-t-10" v-if="state.list && state.list.length > 0">
        <template v-for="(item, index) in state.list" :key="index">
          <s-group-buy-list-custom
            :data="item"
            @item-click="itemClick(item)"
          ></s-group-buy-list-custom>
        </template>
      </view>

      <!-- 地址选择弹窗 -->
      <su-region-picker
        :show="state.showRegion"
        @cancel="state.showRegion = false"
        @confirm="onRegionConfirm"
      />
    </s-layout>
  </view>
</template>

<script setup>
//附近门店列表页
import { computed, reactive, onBeforeMount, ref } from 'vue';
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import merchantApi from '@/sheep/api/merchant';
import _ from 'lodash';

import assNavbar from '@/components/ass-navbar.vue';
//import cSearch from './components/c-search/c-search.vue'

import sGroupBuyListCustom from '@/sheep/components/s-group-buy-list-custom/s-group-buy-list-custom.vue';

const search = ref('');

const indexTop = ref(0);

const child_index = ref(0);
const activeId = ref('');

const categorys = ref([]);

const latitude = computed(() => sheep.$store('wash').myPosition.latitude);

const longitude = computed(() => sheep.$store('wash').myPosition.longitude);

const state = reactive({
  loadStatus: 'more',
  // 页数
  page: 0,
  list: [],
  search: {},
  latitude: 30.189728,
  longitude: 120.21219,
  showRegion: false,
  address: '',
  district_name: '滨江区',
});
onPageScroll((e) => {});
const template = computed(() => sheep.$store('app').template?.home);

const childrend = computed(() => {
  return categorys.value;
});

const onCategorysTabsChange = (item, index) => {
  child_index.value = index;
  state.page = 0;
  state.loadStatus = 'more';
  getList();
};
function searchChange(e) {
  state.search = e;
  // console.log('searchChange',e)
  onSearch();
}
const onRegionConfirm = (e) => {
  state.address = e;
  state.district_name = e.district_name;
  state.showRegion = false;
};

const regionClick = () => {
  state.showRegion = true;
};

const itemClick = (e) => {
  var index = _.findIndex(state.list, { id: e.id });
  var item = state.list[index];

  sheep.$router.back();
  setTimeout(() => {
    uni.$emit('select_shop', {
      ...item,
      title:item.name,
      selectType: 'goods',
    });
  }, 50);
};

async function getCategory() {
  const { data, error } = await merchantApi.getCategoryList();

  if (error == 0) {
    categorys.value = data;
    // categorys.value.unshift({id:"all",name:"推荐"})
  }
}

const onSearch = () => {
  state.page = 0;
  state.loadStatus = 'more';
  getList();
};

onReachBottom(() => {
  getList();
});

async function getList() {
  if (state.loadStatus == 'no-more') return;

  state.loadStatus = 'loading';

  var filter = {
    page: state.page + 1,
    service_category_id: 'all',
    tag: categorys.value[child_index.value].name,
    keyword: search.value,
    lng: longitude.value,
    type: 2,
    lat: latitude.value,
    list_rows: 10,
    ...state.search,
  };

  const { data } = await merchantApi.merchantList(filter);

  if (!data || !data.data) {
    state.loadStatus = 'no-more';
    return;
  }

  state.page = data.current_page;

  data.data.forEach(function (value, index) {
    value.score = Math.floor(value.score);
    value.num = 5 - Math.floor(value.score);
    data.data[index] = value;
  });

  let list = data.data;

  if (state.page <= 1) {
    state.list = list;
  } else {
    state.list.push(...list);
  }

  state.loadStatus = list.length >= 10 && data.total != state.list.length ? 'more' : 'no-more';
}

onLoad(async (opt) => {
  await getCategory();
  if (opt?.search) {
    let f = categorys.value.findIndex((v) => v.name == opt.search);
    if (f != -1) {
      child_index.value = f;
      activeId.value = 'categorys_' + f;
    }
  }

  await getList();
});
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}
.uni-input-placeholder {
  font-size: 28rpx;
  color: #e4e4e4;
}
.bg_white {
  background-color: #ffffff;
}

.bg_color {
  background-color: rgba(255, 255, 255, 0);
}

.search {
  /* #ifdef MP||H5 */
  height: 65rpx;
  /* #endif */

  /* #ifdef APP */
  height: 35rpx;
  /* #endif */

  .left {
    height: 100%;
    .region {
      font-family: PingFang SC;
      font-size: 30rpx;
      font-weight: normal;
      line-height: 30rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: 0.64rpx;
      width: 98rpx;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      font-variation-settings: 'opsz' auto;
      color: #3d3d3d;
    }
    .img {
      width: 25rpx;
      height: 18rpx;
    }
  }
  .right {
    width: calc(100% - 30rpx - 98rpx - 20rpx - 20rpx - 20rpx);
    background-color: #fff;
    margin-right: 20rpx;
    margin-left: 20rpx;
    height: 100%;
    border: 2rpx solid #fff;
    .search-view {
      /* #ifdef MP */
      width: 320rpx;
      /* #endif */
      /* #ifndef MP */
      width: 350rpx;
      /* #endif */
      height: 100%;

      .my-input {
        color: #333;
        /* #ifdef MP||H5 */
        height: 50rpx;
        /* #endif */
        /* #ifdef APP */
        height: 30rpx;
        /* #endif */
        width: 300rpx;
        max-height: 50rpx;
        margin-left: 20rpx;
      }
      .search-icon {
        margin-left: 20rpx;
      }
    }
    .search_btn {
      background-color: var(--ui-BG-5);
      color: #fff;
      /* #ifdef MP||H5 */
      width: 134rpx;
      /* #endif */
      /* #ifdef APP */
      width: 94rpx;
      /* #endif */
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 40rpx;
      font-size: 30rpx;
    }
  }
}

.tabs {
}
.blank {
  height: 20rpx;
  width: 100%;
}
::v-deep .tabs .u-tabs {
  border-bottom: none;
  background-color: rgba(255, 255, 255, 0);
}

.category {
  width: 100%;
  height: 80rpx;
  font-family: PingFang SC;
  .itmes {
    width: 200rpx;
    height: 100%;
    font-size: 30rpx;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.active {
  color: var(--ui-BG-5);
  border: 4rpx solid;
  border-image: radial-gradient(45% 45% at 51% 100%, var(--ui-BG-5) 0%, rgba(71, 223, 189, 0) 100%)
    4;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}
.scroll-view-item_H {
  display: inline-block;
  background-color: #ffffff;
  min-width: 70rpx;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 36rpx;
}
.type {
  font-family: PingFang SC;
  font-size: 24rpx;
  font-weight: normal;
  color: #4f4f4f;
  border-radius: 10rpx;
  margin-right: 5rpx;
  margin-left: 5rpx;
  // padding-left:10rpx;
  // padding-right:10rpx;
  letter-spacing: 1rpx;
}

.ssactive {
  color: var(--ui-BG-5);
  background: var(--ui-BG-6);
  border: solid 1rpx var(--ui-BG-5);
}
</style>
